<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
            line-height: 35px;
            width: 600px;
        }

        table,
        th,
        td {
            border: 1px solid #000;
        }

        .box {
            margin-bottom: 20px;
        }

        .box span {
            margin-right: 10px;
        }

        .box button {
            margin-left: 10px;
            background-color: skyblue;
            border-radius: 5px;
            width: 50px;
            line-height: 25px;
        }

        .box input {
            width: 200px;
            line-height: 30px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- <mytitle></mytitle> -->
        <child :titles="titles" :info="info" @fn="see"></child>

    </div>
    <!-- <template id="get">
        
    </template> -->
    <template id="box">
        <div>
            <div class="box">
                <span>名称</span>
                <input type="text" :value="text" @input="inp">
                <button @click="fath">搜索</button>
                <!-- <p>{{text}}</p> -->
            </div>
            <table>
                <thead>
                    <th v-for="item in titles">{{item}}</th>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in info" v-show="item.is_show">
                        <td>{{item.id}}</td>
                        <td>{{item.title}}</td>
                        <td>{{item.price_info}}</td>
                        <td><button @click="add(index)">删除</button></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4">总价钱:{{ too|RMBformat }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </template>
    <script>
        let child = {
            template: "#box",
            props: ["titles", "info"],
            data() {
                return {
                    text: ""
                }
            },
            computed: {
                //计算总价钱
                too() {
                    let res = this.info.reduce((pre, current) => {
                        return current.is_show == 1 ? pre + current.price_info : pre
                    }, 0)
                    return res
                }
            },
            methods: {
                //点击删除
                add(index) {
                    this.info.splice(index, 1)
                },
                //传给父元素
                fath() {
                    this.$emit("fn", this.text)
                },
                //获取输入框
                inp(e) {
                    this.text = e.target.value;
                    if (!this.text) {
                        this.info.forEach(item => {
                            item.is_show = 1
                        })
                    }
                }
            },
            //格式问题
            filters: {
                RMBformat(valmat) {
                    return "￥" + valmat.toFixed(2) + "元"
                }
            }
        }
        new Vue({
            el: '#app',
            data: {
                titles: ["ID", "主标题", "起步价格", "操作"],
                info: [{
                    "id": 287,
                    "title": "严选新式样板间",
                    "price_info": 29.9,
                    "is_show": 1
                }, {
                    "id": 286,
                    "title": "无“油”无虑的甜蜜酥脆",
                    "price_info": 45,
                    "is_show": 1
                }, {
                    "id": 283,
                    "title": "孩子成长中少不了的一双鞋",
                    "price_info": 78,
                    "is_show": 1
                }, {
                    "id": 282,
                    "title": "成就一室笋香1",
                    "price_info": 121,
                    "is_show": 1
                }, {
                    "id": 281,
                    "title": "条纹新风尚",
                    "price_info": 29,
                    "is_show": 1
                }, {
                    "id": 277,
                    "title": "治愈生活的满怀柔软",
                    "price_info": 66.78,

                    "is_show": 1
                }, {
                    "id": 274,
                    "title": "没有软木拖，怎么过夏天",
                    "price_info": 50.99,
                    "is_show": 1
                }, {
                    "id": 272,
                    "title": "料理也要精细简单",
                    "price_info": 69,
                    "is_show": 1
                }, {
                    "id": 271,
                    "title": "选式新懒人",
                    "price_info": 15.3,
                    "is_show": 1
                }, {
                    "id": 268,
                    "title": "米饭好吃的秘诀：会呼吸的锅",
                    "price_info": 20.1,
                    "is_show": 1
                }],
            },
            components: {
                child
            },
            methods: {
                see(val) {
                    this.info.forEach((item, index) => {
                        if (item.title.includes(val)) {
                            item.is_show = 1;
                        } else {
                            item.is_show = 0
                        }
                    })
                },
            }
        })
    </script>
</body>

</html>